"use client";
import { Loader2, Loader2Icon, PlusIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { trpc } from "@/trpc/client";
import { toast } from "sonner";
import { ResponsiveModal } from "@/components/responsive-dialog";
import { StudioUploader } from "./studio-uploader";
export const StudioUploadModal = () => {

  const utils = trpc.useUtils()
  // 创建完成直接刷新
  const create = trpc.videos.create.useMutation({
    onSuccess: () => {
      toast.success("Create success videos")
      utils.studio.getMany.invalidate()
    },
    onError: () => {
      toast.error("something went error")
    } 
  })
  return (
    <>
      <ResponsiveModal title="Upload a video" open={!!create.data} onOpenChange={() => create.reset()}>
      { create.data?.url ? <StudioUploader endpoint={create.data?.url} onSuccess={()=>{}}></StudioUploader> : <Loader2Icon className="animate-spin" />}
      </ResponsiveModal>
      <Button variant={"secondary"} onClick={() => { create.mutate() }} disabled={create.isPending}>
        {create.isPending ? <Loader2Icon className="animate-spin" /> : <PlusIcon />}
        Create
      </Button>
    </>

  )
}